<template>
  <div class="stat-page-header-root">
    <div class="title-container">{{ inspectInfo.inspectName }}</div>
    <div class="choose-container">
      <i class="icon el-icon-office-building"></i>
      <span class="org-name">{{ orgName }}</span>
      <el-cascader @change="change" v-model="orgParam" :props="orgParamProps"></el-cascader>
    </div>
  </div>
</template>

<script>
import {queryOrgCondition} from "@/api/checkPage/defectQuestionQuery";
import {NODE_TYPE} from "@/constantData";

export default {
  props: {
    inspectInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data() {
    let owner = this
    return {
      orgParam: null,
      currentOrg: null,
      orgParamDataList: [],
      orgParamProps: {
        checkStrictly: true, lazy: true, lazyLoad(node, resolve) {
          if (node?.data?.leaf) {
            resolve()
          } else {
            queryOrgCondition(node?.data).then(res => {
              const nodes = res.data.map(item => {
                item.leaf = item.isLeaf == NODE_TYPE.LEAF;
                if (!owner.orgParamDataList.some(cItem => cItem.type == item.type && cItem.value == item.value)) {
                  owner.orgParamDataList.push(item)
                }
                return item
              })
              // if (owner.orgParam == null) {
              //   owner.orgParam = [res.data[0].value]
              //   owner.change(owner.orgParam)
              // }
              resolve(nodes)
            })
          }
        }
      },
    }
  },
  computed: {
    orgName() {
      let {currentOrg, inspectInfo} = this
      return currentOrg ? currentOrg.label : inspectInfo.belongOrgName;
    }
  },
  methods: {
    change(checkData) {
      let {orgParam, orgParamDataList} = this
      this.currentOrg = orgParamDataList.find(item => item.value == orgParam[orgParam.length - 1]);
      this.$emit('change', this.currentOrg)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/businessTheme.scss";

.stat-page-header-root {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 15px;
  background: #fff;
  align-items: center;

  .title-container {
    font-size: $second-font-size;
  }

  .choose-container {
    display: flex;
    align-items: center;

    .icon {
      position: relative;
      top: 2px;
      margin-right: 10px;
    }

    .org-name {
      font-size: $second-font-size;
    }

    ::v-deep .el-cascader {
      margin-left: 35px;

      .el-input {
        border: none;
        padding-left: 0;
        border: none;
        width: 0;

        .el-input__inner {
          width: 0;
          border: none;
          padding: 0;
        }

        .el-input__suffix{
          .el-input__icon{
            color: $bt-color;
            font-size: $second-font-size;
            font-weight: 700;
          }
        }
      }
    }
  }
}
</style>
